<template>
    <view class="personal-mes-main">
        <view class="head-portrait">
            <view class="label">头像</view>
            <view class="head-img-container">
                <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="head-img">
                    <image
                        class="portrait_img"
                        :src="Data.form.avatar || getImgOssUrl('/ui-prod-2.7.0/avatar.png')"></image>
                    <image :src="getImgOssUrl('/ui-prod-2.0.0/rightarrow1.1.png')" class="link_icon"></image>
                </button>
            </view>
        </view>
        <view class="other-mes">
            <view class="label">昵称</view>
            <view @tap="handleTouchInput(nicknameFocus)" class="right-mes">
                <input
                    ref="nicknameRef"
                    type="nickname"
                    @focus="nicknameFocus.value = true"
                    :focus="nicknameFocus.value"
                    @touchstart.stop="handleTouchInput(nicknameFocus)"
                    @confirm="changeName"
                    @blur="changeName"
                    v-model="Data.form.nickname"
                    :maxlength="20"
                    :cursor-spacing="75"
                    placeholder="请输入昵称"
                    placeholder-class="placeholder"
                    :class="['nick-name', nicknameFocus.value ? 'text-place' : '']" />
                <view class="link-container">
                    <image :src="rightarrow1" class="link_icon"></image>
                </view>
            </view>
        </view>
        <view class="other-mes">
            <view class="label">性别</view>
            <view class="right-mes sex">
                <!-- value 是下标 -->
                <picker
                    :value="Data.form.sex ? Data.form.sex - 1 : 0"
                    :range="genderList"
                    @change="genderPickerChange"
                    range-key="name"
                    class="sex-picker">
                    <view class="uni-input">{{ genderList.find(x => x.code === Data.form.sex)?.name || '未知' }} </view>
                    <image class="link_icon" :src="rightarrow1"></image>
                </picker>
            </view>
        </view>
        <view class="other-mes">
            <view class="label">生日</view>
            <view class="right-mes">
                <picker
                    mode="date"
                    :value="Data.form.birthday"
                    start="1700-01-01"
                    end="2999-12-31"
                    @change="bindDateChange">
                    <view :class="['uni-input', Data.form.birthday ? '' : 'placeholder']">{{
                        Data.form.birthday ? Data.form.birthday : Data.placeholder
                    }}</view>
                </picker>
                <view class="link-container">
                    <image class="link_icon" :src="rightarrow1"></image>
                </view>
            </view>
        </view>
        <view class="other-mes">
            <view class="label">所在地</view>
            <view class="right-mes">
                <uni-data-picker
                    class="mes-addr"
                    placeholder="请选择省市区"
                    popup-title="请选择所在地区"
                    :localdata="Data.dataTree"
                    @change="getAddrIds"
                    :map="{ text: 'name', value: 'id' }"
                    :clear-icon="false"
                    v-model="Data.form.areaId">
                </uni-data-picker>
                <view class="link-container">
                    <image class="link_icon" :src="rightarrow1"></image>
                </view>
            </view>
        </view>
        <view class="other-mes">
            <view class="label">绑定的手机号</view>
            <view class="tel">{{ Data.form.mobile }}</view>
        </view>
        <view class="other-mes mgt_18" @click="toRealName">
            <view class="label">实名认证</view>
            <view :class="['right-mes', Data.realNameAuthentication ? '' : 'actitve_mes']">
                {{ Data.realNameAuthentication ? '已认证' : '未认证' }}
                <view class="link-container">
                    <image class="link_icon" :src="rightarrow1"></image>
                </view>
            </view>
        </view>
        <!-- 隐私监听 -->
        <el-privacy-listener-popup></el-privacy-listener-popup>
    </view>
</template>
<script setup>
import { ref, reactive, nextTick } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { getImgOssUrl } from '@/commons/utils.js';
import { handleTouchInput } from '@/hooks';
import request from '@/request';
import router from '@/router';
import store from '@/store';
import storage from '@/commons/storage';

const rightarrow1 = getImgOssUrl('/ui-prod-2.0.0/rightarrow1.1.png');
const orderStore = store.useOrderStore();

const genderList = [
    {
        code: 1,
        name: '男'
    },
    {
        code: 2,
        name: '女'
    }
];
let nicknameRef = ref(null);
const Data = reactive({
    form: {
        avatar: '',
        nickname: '微信用户',
        sex: 0,
        birthday: '',
        areaId: '',
        mobile: ''
    },
    placeholder: '请选择年月日',
    dataTree: [],
    realNameAuthentication: false
});
Data.form.avatar = ref(storage.get('avatar'));
let nicknameFocus = reactive({
    value: false
});

onShow(() => {
    Data.dataTree = orderStore.addressListLevel3;
    if (!Object.keys(Data.dataTree).length) {
        getPlace();
    }
    getMemberInfo();
});
/* 获取会员信息 */
const getMemberInfo = () => {
    request('memberInfo')
        .then(res => {
            if (res.data.birthday === '0000-00-00') {
                res.data.birthday = '';
            }
            Data.form = res.data;
            Data.form.nickname = Data.form.nickname || '微信用户' + String(Data.form.mobile || '')?.substr(-4);
            Data.realNameAuthentication = Data.form.realNameAuthentication;
        })
        .catch(error => {
            uni.showToast({
                title: error.data.msg,
                icon: 'none',
                duration: 2000
            });
        });
};
// 得到选择的地址id列表
const getAddrIds = e => {
    const val = e.detail.value;
    Data.form.province_id = val[0].value;
    Data.form.city_id = val[1].value;
    nextTick(() => {
        Data.form.areaId = val[2].value;
    });
    const params = {
        province_id: val[0].value,
        city_id: val[1].value,
        area_id: val[2].value
    };
    request('saveMemberInfo', params);
};
// 获取地址信息
const getPlace = () => {
    request('regionServ', { level: 3 }).then(res => {
        res.data.shift();
        orderStore.addressListLevel3 = res.data;
        Data.dataTree = orderStore.addressListLevel3;
    });
};
// 头像
const onChooseAvatar = e => {
    const { avatarUrl } = e.detail;
    Data.form.avatar = avatarUrl;
    let imgbase64 = 'data:image/png;base64,' + uni.getFileSystemManager().readFileSync(avatarUrl, 'base64');
    request('changeHead', { imageBase64: imgbase64 }).then(res => {
        request('saveMemberInfo', { avatar: res.data }).then(() => {
            storage.set('avatar', res.data);
        });
    });
};
// 名字
const changeName = () => {
    nicknameFocus.value = false;
    if (!Data.form.nickname) {
        return;
    }
    request('saveMemberInfo', { nickname: Data.form.nickname }).then(() => {
        storage.set('nickname', Data.form.nickname);
    });
};
// 性别
const genderPickerChange = e => {
    const { value } = e.detail;
    Data.form.sex = genderList[Number(value)].code;
    request('saveMemberInfo', { sex: Data.form.sex });
};
// 生日
const bindDateChange = e => {
    const { value } = e.detail;
    Data.form.birthday = value;
    request('saveMemberInfo', { birthday: value });
};

// 实名认证
const toRealName = () => {
    router.push({
        path: '/pages-user/realName/index',
        query: {
            status: Data.realNameAuthentication ? 'authenticated' : 'unverified'
        }
    });
};
</script>
<style lang="scss" scoped>
.personal-mes-main {
    border-top: 2rpx solid #f5f5f5;
    .mes-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2rpx solid #f5f5f5;
        background-color: #fff;
        padding-left: 28rpx;
    }
    .head-portrait {
        @extend .mes-item;
        height: 152rpx;
        .head-img-container {
            display: flex;
            align-items: center;
            .head-img {
                display: flex;
                align-items: center;
                padding: 0;
                background-color: #ffffff;
                .link_icon {
                    padding: 0 28rpx 0 0;
                }
            }
            .portrait_img {
                width: 109rpx;
                height: 109rpx;
                border-radius: 50%;
            }
        }
    }
    .other-mes {
        @extend .mes-item;
        height: 101rpx;
        .right-mes {
            display: flex;
            align-items: center;
            height: 100%;
            color: #666666;
            font-size: 29rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            .nick-name {
                text-align: right;
            }
            .text-place {
                text-align: left;
            }
        }
        .actitve_mes {
            font-size: 29rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #cccccc;
        }
        .sex {
            display: flex;
            align-items: center;
            width: 200rpx;
            height: 100%;
            .sex-picker {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                width: 100%;
                height: 100%;
                .uni-input {
                    display: inline-block;
                    min-width: 80rpx;
                    text-align: right;
                }
                .link_icon {
                    padding-right: 28rpx;
                }
            }
        }
        .tel {
            padding-right: 28rpx;
            font-size: 29rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
        }
    }
    .label {
        width: 174rpx;
        font-size: 29rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        flex-shrink: 0;
        color: #333333;
    }
    .link-container {
        padding-right: 28rpx;
    }
    .link_icon {
        width: 11rpx;
        height: 20rpx;
        margin-left: 22rpx;
    }
    .mgt_18 {
        margin-top: 18rpx;
    }
}
</style>
<style lang="scss">
.personal-mes-main {
    .placeholder {
        font-size: 29rpx !important;
        color: #cccccc;
    }
    .mes-addr {
        max-width: 500rpx;
        overflow: hidden; // 溢出隐藏
        .selected-item {
            width: auto;
        }
        .selected-item-active {
            border-bottom: 2px solid #fe292b;
        }
        .check {
            border: 2px solid #fe292b;
            border-left: 0;
            border-top: 0;
        }
        .uni-data-tree {
            .uni-data-tree-input {
                .input-value-border {
                    border: 0 !important;
                    padding: 0;
                    .placeholder {
                        font-family: UICTFontTextStyleBody;
                        text-overflow: clip;
                        white-space: nowrap;
                        font-size: 29rpx !important;
                        color: #cccccc;
                    }
                }
                .arrow-area {
                    display: none !important;
                }
            }
        }
    }
}
</style>
